<template>
	<view class="page">
		<view class="header">
			<view class="left" @click="toRecord">
				<image class="image" src="../../../static/me/integral/my_record.png"></image>
				<view>兑换记录</view>
			</view>
			<view class="right">
				<view class="image">{{ my_integral }}</view>
				<view>我的积分</view>
			</view>
		</view>
		<view class="aside">
			<view class="integral" v-for="(item, i) in integralData" :key="i">
				<item :info="item" @success="success()"></item>
			</view>
		</view>
	</view>
</template>

<script>
	import item from './componment/item.vue'
	import {
		getIntegral,
		myIntegral
	} from '../../../network/me.js'
	export default {
		components: {
			item
		},
		data() {
			return {
				my_integral: 0,
				integralData: []
			};
		},
		onLoad() {
			this.success()
		},
		methods: {
			async init() {
				const result = await getIntegral()
				if (!result.flag) return
				this.integralData = result.data
				console.log(this.integralData)
			},
			
			async getMyIntegral() {
				const result  = await myIntegral({
					name: '家属1'
				})
				console.log(result)
				if (!result.flag) return;
				this.my_integral = result.data[0].integral
			},
			
			success() {
				console.log(11)
				this.init()
				this.getMyIntegral()
			},
			
			toRecord() {
				uni.navigateTo({
					url: '../record/record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
			background-color: white;
		.header {
			display: flex;
			justify-content: space-around;
			margin: 10px;
			padding: 15px 0;
			background-color: #1CBAB6;
			border-radius: 5px;
			color: white;
			&>view {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:nth-of-type(1) {
					border-right: 0.5px dotted #F2F2F2;
				}
				&>.image {
					width: 50px;
					height: 50px;
					line-height: 50px;
					font-size: 20px;
					text-align: center;
					background-color: white;
					border-radius: 50%;
					margin-bottom: 10px;
					color: rgb(159, 198, 255);
				}
			}
		}
		
		.aside {
			display: flex;
			flex-wrap: wrap;
			.integral {
				width: 50%;
				.item {
				}
			}
		}	
	}
</style>
